<script type="text/javascript" src="../../static/js/prompt.js" th:src="@{/js/prompt.js}"></script>

<link href="../../static/css/jeDate-test.css" rel="stylesheet" th:href="@{/css/jeDate-test.css}"/>
<link href="../../static/css/jedate.css" rel="stylesheet" th:href="@{/css/jedate.css}"/>
<script src="../../static/js/jquery.jedate.js" th:src="@{/js/jquery.jedate.js}"></script>
<script src="../../static/js/jedate-test.js" th:src="@{/js/jedate-test.js}"></script>
<div class="x_panel">
    <div class="x_title">
        <h2>人员
            <small> 新增</small>
        </h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br/>
        <form id="defaultForm" data-parsley-validate=""
              class="form-horizontal form-label-left" novalidate="" method="post" >
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">人员编码 </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="empCode" id="empCode" required="required"
                           oninvalid="setCustomValidity('请输入用户编号');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">人员姓名
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="empName" required="required"
                           oninvalid="setCustomValidity('请输入用户名称');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">性别</label>
                <div class="col-md-6 col-sm-6 col-xs-12 radio radio-success in_on">
                    <input type="hidden" id="mode2"  name="gender" />
                    <div class="col-md-6 ">
                        <input type="radio" id="start3" name="sex" value="男"/><label>男</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start4" name="sex" value="女"/><label>女</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start8" name="sex" value="1"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">登录账号
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="loginName"  required="required"
                           oninvalid="setCustomValidity('请输入登录账号');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">登录密码
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text"  name="loginPwd" required="required"
                           oninvalid="setCustomValidity('请输入用户密码');" class="form-control col-md-7 col-xs-12" readonly="readonly" value="123456"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">使用状态</label>
                <div class="col-md-6 col-sm-6 col-xs-12 radio radio-success" style="    overflow: hidden;" >
                    <input type="hidden" id="sts" name="sts" />
                    <div class="col-md-6 ">
                        <input type="radio" id="start1" name="start" value="1"/><label>使用</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start2" name="start" value="0"/><label>未使用</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start5" name="start" value="1"/>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">联系方式</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="contactNumber" required="required"
                           oninvalid="setCustomValidity('请输入联系方式');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">电子邮件</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="email" required="required"
                           oninvalid="setCustomValidity('请输入电子邮件');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">用工形式
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <select class="form-control" name="empMode">
                        <option ></option>
                        <option th:each="info,iterStat : ${model}" th:value="${info.kv_id}" th:text="${info.kv_val}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">所属部门</label>
                <input type="hidden" name="orgId" id="orgId" value=""/>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="input-group col-md-12">
                        <input type="text" class="form-control" name="orgName" readonly="readonly"/>
                        <span class="input-group-btn" style="position: absolute;right: 28px;z-index: 100">
                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">+</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">角色名称
                </label>
                <input type="hidden" name="roleId" id="roleId" value=""/>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="input-group col-md-12">
                        <input type="text" class="form-control" name="roleName" readonly="readonly" />
                        <span class="input-group-btn" style="position: absolute;right: 28px;z-index: 100">
                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">+</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">

                    <button type="button" id="validateBtn" class="btn btn-primary">保存</button>
                    <button type="button" id="resetBtn" class="btn btn-primary">重置</button>
                    <button type="button"  onclick="backup()" class="btn btn-success">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    部门名称
                </h4>
            </div>
            <ul id="treeDemo" class="ztree"></ul>

            <!--<div class="tree well" id="tree" style="height: 200px;overflow: scroll;z-index: 110"></div>-->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="send" onclick="send()">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    角色名称
                </h4>
            </div>
            <ul id="treeDemo2" class="ztree"></ul>

            <!--<div class="tree well" id="tree" style="height: 200px;overflow: scroll;z-index: 110"></div>-->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="send2" onclick="send2()">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<style>
    .in_on i { opacity: 0 }
</style>
    <SCRIPT type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var setting = {
        check: {
            enable: true
        },
        callback: {
            onClick: zTreeBeforeClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };
    var zNodes =eval([[${org}]]);
    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
    });

    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = treeObj.getCheckedNodes(true),
            v = "";
        for (var i = 0; i < nodes.length; i++) {
            v += nodes[i].name + ",";//获取选中节点的值
//                alert(nodes[i].name);
        }
    };

    function send() {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        c="";
        for(var i=0;i<nodes.length;i++){
                v+=nodes[i].name + ",";
                c+=nodes[i].id + "|";
        }
        $("input[name=orgName]").val(v.substring(0,(v.length-1)));
        $('form').data('bootstrapValidator')
            .updateStatus('orgName', 'NOT_VALIDATED', null)
            .validateField('orgName');
        $("input[name=orgId]").val(c.substring(0,(c.length-1)));

        $("#myModal").modal("hide");
    }
    /*]]>*/
</SCRIPT>

<script type="text/javascript" th:inline="javascript">



    $(document).ready(function() {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                empCode: {
                    validators: {
                        notEmpty: {
                            message: '请输入人员编码'
                        }
                    }
                },
                empName: {
                    validators: {
                        notEmpty: {
                            message: '请输入人员姓名'
                        }
                    }
                },
                sex: {
                    validators: {
                        notEmpty: {
                            message: '请选择性别'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '请输入登录名'
                        }
                    }
                },
                start: {
                    validators: {
                        notEmpty: {
                            message: '使用状态'
                        }
                    }
                },
                contactNumber: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '请输入11位手机号码'
                        },
                        regexp: {
                            regexp: /^1[3|5|8|7]{1}[0-9]{9}$/,
                            message: '请输入正确的手机号码'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址不对'
                        }
                    }
                },
                empMode: {
                    validators: {
                        notEmpty: {
                            message: '用工形式不能为空'
                        }
                    }
                },
                orgName: {
                    validators: {
                        notEmpty: {
                            message: '部门不能为空'
                        }
                    }
                },
                roleName: {
                    validators: {
                        notEmpty: {
                            message: '角色不能为空'
                        }
                    }
                }



            }
        });
        // Validate the form manually
        $('#validateBtn').click(function() {
            $("input[name=gender]").val($("input[name='sex']:checked").val());
            $("input[name=sts]").val($("input[name='start']:checked").val());
            $('form').bootstrapValidator('validate');
            var flag = $('form').data('bootstrapValidator').isValid();
            if(flag){
                var SaveAndFlush = $("#defaultForm").serialize();
                $('#validateBtn').attr("disabled","disabled");
                $.post("/emp/checkEmp",SaveAndFlush, function (result) {
                    if(result=="empCode"){
                        $.MsgBox.Alert("提示", "用户编码重复");
                        $("input[name=empCode]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('empCode', 'NOT_VALIDATED', null)
                            .validateField('empCode');
                        $('#validateBtn').removeAttr("disabled","disabled");
                        /* 此处返回值为'empName'时可以过滤重复的用户名，但是重名很正常因此不用 */
                    }else if(result=="empNameError"){
                        $.MsgBox.Alert("提示", "用户姓名重复");
                        $("input[name=empName]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('empName', 'NOT_VALIDATED', null)
                            .validateField('empName');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    }else if(result=="loginName"){
                        $.MsgBox.Alert("提示", "登录名重复");
                        $("input[name=loginName]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('loginName', 'NOT_VALIDATED', null)
                            .validateField('loginName');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    }else if(result=="contactNumber"){
                        $.MsgBox.Alert("提示", "联系方式重复");
                        $("input[name=contactNumber]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('contactNumber', 'NOT_VALIDATED', null)
                            .validateField('contactNumber');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    }else if(result=="email"){
                        $.MsgBox.Alert("提示", "邮箱重复");
                        $("input[name=email]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('email', 'NOT_VALIDATED', null)
                            .validateField('email');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    }else{
                        $.post("/emp/insertEmp",SaveAndFlush, function (result) {
                            if(result!=null){
                                $.MsgBox.Alert("提示", "新增成功");
                                $('#validateBtn').removeAttr("disabled","disabled");
                                $.goTo(/*[[@{toEmpList}]]*/"./emp_list.html");
                            }
                        });
                    }
                });
            } else {
                return;
            }

        });
        $('#resetBtn').click(function() {//重置
            $('form').data('bootstrapValidator').resetForm(true);
            $("input[name=loginPwd]").val("123456");
        });
        $("form").each(function() {
            var $form = $(this);
            $form.bootstrapValidator().on('success.form.bv', function(e) {
                // 阻止默认事件提交
                e.preventDefault();
            });
        });
    });
</script>
<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/
    var setting = {
        check: {
            enable: true
        },
        callback: {
            onClick: zTreeBeforeClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };

    var zNodes =eval([[${role}]]);
    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo2"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){

        $.fn.zTree.init($("#treeDemo2"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo2");
        var orgS=$("input[name=roleName]").val().split(",");
        var node = treeObj.transformToArray(treeObj.getNodes());
        $.each(orgS,function(i,val){
            $.each(node,function(index,value){
                if(val==value.name){
                    treeObj.checkNode(node[index],true,true);

                }
            })
        })
    });

    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo2"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            if(nodes[i].isParent==false){
                alert(nodes[i].name); //获取选中节点的值
            }

        }
    };

    function send2() {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo2"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        c="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            c+=nodes[i].id + "|";
        }
        $("input[name=roleName]").val(v.substring(0,(v.length-1)));
        $('form').data('bootstrapValidator')
            .updateStatus('roleName', 'NOT_VALIDATED', null)
            .validateField('roleName');
        $("input[name=roleId]").val(c.substring(0,(c.length-1)));


        $("#myModal2").modal("hide");
    }
    /*]]>*/
</script>






